<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">

<head th:replace="admin/_fragments::head('博客管理')">
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>博客管理</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
	<link rel="stylesheet" href="../../start/css/me.css">
	<link rel="stylesheet" href="../../start/lib/editormd/css/editormd.css">
</head>

<body>
<!-- 导航 -->
<nav th:replace="admin/_fragments::menu(1)" class="ui inverted attached segment m-padded-tb-mini">
	<div class="ui container">
		<div class="ui stackable menu secondary inverted ">
			<h2 class="ui teal header item">Blog</h2>
			<a href="#" class="active m-item item m-mobile-hide"><i class="home icon"></i>首页</a>
			<a href="#" class=" m-item item m-mobile-hide"><i class="idea icon"></i>分类</a>
			<a href="#" class="m-item item m-mobile-hide"><i class="tags icon"></i>标签</a>
			<div class="right m-item m-mobile-hide menu">
				<div class="ui dropdown  item">
					<div class="text">
						<img class="ui avatar image" src="http://heian99.top/usr/themes/luoli/img/gg.jpg">
						邓昌荣
					</div>
					<i class="dropdown icon"></i>
					<div class="menu">
						<a href="#" th:href="@{/admin/logout}" class="item">注销</a>
					</div>
				</div>
			</div>
		</div>
	</div>

	<a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
		<i class="sidebar icon"></i>
	</a>
</nav>
<!-- 二级导航 -->
<div class="menu ui attached pointing">
	<div class="ui container">
		<div class="ui right menu">
			<a href="#" th:href="@{/admin/blogs/input}" class="teal active item">发布</a>
			<a href="#" th:href="@{/admin/blogs}" class="item">列表</a>
		</div>
	</div>
</div>
<!-- 主体 -->
<div class=" ">
	<div class="ui container">


		<form id="blog-form" th:action="@{/admin/blogs}" action="#" method="POST" class="ui form ">
			<!--如果为真则是发布 假的则是保存-->
			<input type="hidden" name="published" th:value="${blog.published}">
			<input type="hidden" name="id" th:value="${blog.id}">

			<div class="field">
				<div class="ui left labeled input">
					<div class="ui selection compact teal basic dropdown label">
						<input type="hidden" name="flag" th:value="${blog.flag}" value="原创">
						<i class="icon dropdown"></i>
						<div class="text">原创</div>
						<div class="menu">
							<div class="item" data-value="原创">原创</div>
							<div class="item" data-value="转载">转载</div>
							<div class="item" data-value="翻译">翻译</div>
						</div>
					</div>
					<input type="text" th:value="${blog.title}"  name="title" placeholder="标题">
				</div>
			</div>
			<div class="field">
				<div id="test-editormd" style="z-index: 1 !important;">
					<textarea name="content" th:text="${blog.content}" id="" placeholder="博客内容" cols="30" rows="10" style="display: none;"></textarea>
				</div>
			</div>
			<div class="two fields">
				<div class="required field">
					<div class="ui left action labeled input">
						<label class="ui compact teal basic label">分类</label>
						<div class="ui fluid selection dropdown ">
							<input type="hidden" name="type.id" th:value="${blog.type!=null}?${blog.type.id}">
							<i class="icon dropdown"></i>
							<div class="text">分类</div>
							<div class="menu">
								<div th:each="type:${types}" class="item" th:text="${type.name}" th:data-value="${type.id}">错误日志</div>

							</div>
						</div>
					</div>
				</div>
				<div class="field">
					<div class="field">
						<div class="ui left action labeled input">
							<label class="ui compact teal basic label">标签</label>
							<div class="ui fluid selection multiple search dropdown ">
								<input type="hidden" name="tagIds" th:value="${blog.tagIds}">
								<i class="icon dropdown"></i>
								<div class="text">标签</div>
								<div class="menu">
									<div th:each="tag:${tags}" class="item" th:text="${tag.name}" th:data-value="${tag.id}">错误日志</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="required field">
				<div class="ui labeled input">
					<label  class="ui basic teal label">首图</label>
					<input type="text" th:value="${blog.firstPicture}" name="firstPicture" placeholder="首图引用地址">
				</div>
			</div>
			<div class="field">
				<div  >
					<textarea name="description" th:text="${blog.description}"  placeholder="博客描述" cols="30" rows="5" ></textarea>
				</div>
			</div>
			<!-- 分类和 标签 -->
			<div class="inline fields">
				<div class="field">
					<div class="ui checkbox">
						<input type="checkbox" th:checked="${blog.recommend}" name="recommend" id="recommend" checked class="hidden">
						<label for="recommend">推荐</label>
					</div>
				</div>
				<div class="field">
					<div class="ui checkbox">
						<input type="checkbox" th:checked="${blog.shareStatement}" name="shareStatement" id="shareInfo" class="hidden">
						<label for="shareInfo">转载声明</label>
					</div>
				</div>
				<div class="field">
					<div class="ui checkbox">
						<input type="checkbox" th:checked="${blog.appreciation}" name="appreciation" id="appreciation" class="hidden">
						<label for="appreciation">赞赏</label>
					</div>
				</div>
				<div class="field">
					<div class="ui checkbox">
						<input type="checkbox" th:checked="${blog.commentabled}" name="commentabled" id="comment" class="hidden">
						<label for="comment">评论</label>
					</div>
				</div>
			</div>
			<div class="ui error message"></div>
			<!-- 按钮 -->
			<div class="ui right aligned container">
				<button type="button" class="ui red button" onclick="window.history.go(-1)">
					返回
				</button>
				<button id="save-btn" class="ui submit primary button">
					保存
				</button>
				<button id="publish-btn" class="ui teal button">
					发布
				</button>
			</div>
		</form>

	</div>
</div>

<!-- 尾部 -->
<footer th:replace="admin/_fragments::footer" class="ui segment vertical inverted m-padded-tb-massive">
	<div class="ui center aligned container">
		<div class="ui inverted stackable divided grid">
			<div class="three wide column">
				<div class="ui inverted link list">
					<div class="item">
						<img src="../../start/img//wechat.jpg" class="ui rounded image" alt="" style="width: 110px;">
					</div>
				</div>
			</div>
			<div class="three wide column">
				<h4 class="ui inverted header">最新博客</h4>
				<div class="ui inverted link list">
					<a href="#" class="item">用户</a>
					<a href="#" class="item">用户</a>
					<a href="#" class="item">用户</a>
				</div>
			</div>
			<div class="three wide column">
				<h4 class="ui inverted header">联系我</h4>
				<div class="ui inverted link list">
					<a href="#" class="item">Email：2495988443@qq.com</a>
					<a href="#" class="item">QQ: 2495988443</a>

				</div>
			</div>
			<div class="seven wide column">
				<h4 class="ui inverted header">Blog</h4>
				<p>这是我的个人博客、会分享关于编程、写作、思考相关的任何内容，希望可以给来到这儿的人有所帮助</p>
			</div>
		</div>
		<div class="ui inverted section divider"></div>
		<p class="">Copyright © 2016 - 2017 Lirenmi Designed by Lirenmi</p>
	</div>
</footer>



</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<script type="text/javascript" src="../../start/lib/editormd/editormd.min.js" th:src="@{/lib/editormd/editormd.min.js}"></script>


<script >
	$('.menu.toggle').click(function () {
		$('.m-item').toggleClass('m-mobile-hide');
	});

	$('.ui.dropdown').dropdown({
		on: 'hover'
	});

	var testEditor;
	$(function() {
		testEditor = editormd("test-editormd", {
			width   : "100%",
			height  : 640,
			syncScrolling : "single",
			path    : "/lib/editormd/lib/"

		});
	});
	//保存
	$('#save-btn').click(function () {
		$('[name="published"]').val(false);
		$('#blog-form').submit();
	});

	//发布
	$('#publish-btn').click(function () {
		$('[name="published"]').val(true);
		$('#blog-form').submit();
	});



	//数据校验
	$('.ui.form').form({
		fields: {
			name: {
				identifier: 'title',
				rules: [
					{
						type   : 'empty',
						prompt : '标题：请输入博客标题'
					}
				]
			},
			content : {
				identifier: 'content',
				rules: [
					{
						type   : 'empty',
						prompt : '标题：请输入博客内容'
					}
				]
			},
			typeId : {
				identifier: 'type.id',
				rules: [
					{
						type   : 'empty',
						prompt : '标题：请输入博客分类'
					}
				]
			},
			firstPicture : {
				identifier: 'firstPicture',
				rules: [
					{
						type   : 'empty',
						prompt : '标题：请输入博客首图'
					}

				]
			},
			description: {
				identifier: 'description',
				rules: [
					{
						type   : 'empty',
						prompt : '标题：请输入博客描述'
					}

				]
			},

		}
	})
	;
</script>

</html>